<template>
	<view class="app app-bg">
		<!-- 页面内容开始 -->
		<view class="list-page">

			<!--头部开始 -->
			<view class="list-head">
				<view class="list-search">
					<!-- 快捷搜索 -->
					<u-search v-model="queryForm1.formData[listSearch.key]" :placeholder="listSearch.placeholder" :show-action="false" input-align="center" class="search-input" shape="square" @search="search" @clear="search"></u-search>
				</view>
				<!-- 总记录数 -->
				<view class="total-desc"> 共 <text class="total-num">{{ data.total }}</text> 条记录 </view>
			</view>
			<!--头部结束 -->
			
			<!--无内容时 -->
			<view v-if="data.list.length == 0" style="padding: 40% 0 80% 0;">
				<u-empty v-if="loading" text="查询中..." mode="search"></u-empty>
				<u-empty v-else text="暂无内容" mode="list"></u-empty>
			</view>
			<!--有内容时开始-->
			<view v-else class="list-main">
				<block v-for="(item, index) in data.list" :key="item._id">
					<!-- ****************** 自定义item的内容开始 ****************** -->

					<view class="list-item">
						<view class="content" @click.stop="itemClick(item)">
							
						</view>
					</view>

					<!-- ****************** 自定义item的内容结束 ****************** -->
				</block>
				<!-- 加载更多-->
				<u-loadmore :status="state.loadmore" bg-color="var(--bgcolor)" margin-bottom="30" @loadmore="nextPage" />
			</view>
			<!--有内容时结束-->
		</view>
		
		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
	</view>
</template>

<script>
var that; // 当前页面对象
var vk; // vk依赖
var originalForms = {}; // 表单初始化数据
export default {
	data() {
		// 页面数据变量
		return {
			// 获取list数据的云函数请求路径
			url: "template/list/pub/getList",
			// init请求返回的数据
			data: {
				list: [],
				total: "-",
				hasMore: true // 是否还有下一页数据
			},
			// 列表查询请求数据
			queryForm1: {
				// 分页数据
				pagination: {
					pageIndex: 1, //当前页码
					pageSize: 20 //每页显示数量
				},
				// 查询表单数据源，可在此设置默认值
				formData: {
					
				},
				// 查询匹配规则 fieldName:指定数据库字段名,不填默认等于key
				columns: [
					{ key: "no", mode: "%%" },
				],
				// 排序规则
				sortRule: [
					{ name:"_add_time", type:"desc" }, // desc降序 asc升序
				]
			},
			// 列表搜索框 key 可以是 queryForm1.columns 中的任意1个key
			listSearch: { key: "no", placeholder: "输入单号搜索" },
			// 页面状态
			state: {
				loadmore: "loading", // loadmore的显示状态
			},
			loading: false, // 是否请求中
			scrollTop: 0, // 滚动条当前位置
		};
	},
	onPageScroll(e) {
		that.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		that = this;
		vk = that.vk;
		that.options = options;
		that.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		
	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 页面下拉刷新
	onPullDownRefresh() {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	// 监听 - 页面触底部
	onReachBottom() {
		that.nextPage();
	},
	// 监听 - 点击右上角转发时 https://uniapp.dcloud.io/api/plugins/share.html#onshareappmessage
	onShareAppMessage(options) {
	
	},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			console.log("init: ", options);
			// 拷贝一份表单的初始值
			originalForms["queryForm1"] = vk.pubfn.copyObject(that.queryForm1.formData);

			// 查询
			that.search();
		},
		// 搜索查询
		search(e) {
			that.queryForm1.pagination.pageIndex = 1;
			that.data.pageKey = true;
			that.getList();
		},
		// 加载下一页数据
		nextPage() {
			if (that.state.loadmore == "loadmore") {
				that.state.loadmore = "loading";
				that.queryForm1.pagination.pageIndex++;
				that.getList();
			}
		},
		// 获取list数据
		getList(obj = {}) {
			vk.pubfn.getListData2({
				that: that,
				url: that.url,
				success: obj.success
			});
		},
		itemClick(item){
			console.log(`点击了${item._id}`);
		}
	},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>

/* list主结构开始 */
.list-page {
	background-color: var(--bgcolor);
	
	/* 头部 */
	.list-head {
		.total-desc {
			font-size: 28rpx;
			color: #999;
			padding: 20rpx 30rpx 0rpx 30rpx;
			padding-bottom: 0;
			line-height: 52rpx;
			width: 100%;
		}
		
		.total-num {
			font-weight: bold;
			color: black;
			font-size: 26rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}
		
		.list-search {
			background-color: #ffffff;
			padding: 20rpx 30rpx;
		}
	}
	
	.list-main {
		padding: 0rpx 0rpx 20rpx 0rpx;
	}
	
}

/* list主结构结束 */


/* list-item开始 */
.list-item {
	margin: 20rpx;
	
	>.content {
		background-color: #ffffff;
		border-bottom: 2rpx solid #f3f3f3;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		
	}

}
/* list-item结束 */


</style>
